import React from "react";
import { Card, Row, Col, Button } from "antd";
import "./index.less";
const UIButton: React.FC = () => (
	<div>
		<div style={{ textAlign: "center", color: "red" }}>
			<h1>UI Button</h1>
		</div>
		<Row>
			<Col span={24}>
				<Card title="基本按钮">
					<Button type="primary">button</Button>
					<Button type="default">button</Button>
					<Button type="link">button</Button>
					<Button type="ghost">button</Button>
					<Button type="dashed">button</Button>
					<Button type="danger">button</Button>
					<Button>button</Button>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span={24}>
				<Card title="图形按钮">
					<Button icon="plus" type="primary">
						增
					</Button>
					<Button icon="delete">删</Button>
					<Button icon="link">改</Button>
					<Button icon="search">查</Button>
					<Button icon="plus" shape="circle" type="primary"></Button>
					<Button icon="delete" shape="round"></Button>
					<Button icon="search" shape="circle-outline"></Button>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span={24}>
				<Card title="loading按钮">
					<Button type="primary" loading={true}>
						增
					</Button>

					<Button icon="search" type="primary" shape="circle" loading={true}></Button>
					<Button icon="plus" shape="circle" type="primary" loading={true}></Button>
					<Button icon="delete" shape="round" loading={true}></Button>
					<Button icon="search" shape="circle-outline" loading={true}></Button>
					<Button type="primary">关闭</Button>
				</Card>
			</Col>
		</Row>
	</div>
);

export default UIButton;
